<template>
  <!--@select="handleSelect"-->
  <el-menu
      :default-active="activeIndex.toString()"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item v-for="(tab, i) in tabs" :key="i" :index="i.toString()" @click="tabClick(i)">
      {{ tab.name }}
    </el-menu-item>
<!--    <el-menu-item index="1">首页</el-menu-item>-->
<!--    <el-menu-item index="2">博客中心</el-menu-item>-->
  </el-menu>
</template>

<script>
export default {
  name: "NavBar",
  data(){
    return {
      activeIndex: 0,
      tabs:[
        {
          name:'首页',
          path:'/home'
        },
        {
          name: '博客中心',
          path: '/blog'
        }
      ]
    }
  },
  methods:{
    tabClick(tabIndex){
      this.$router.push(this.tabs[tabIndex].path);
    }
  }
}
</script>

<style scoped>

</style>
